<template>
  <header class="header">
    <span class="h-back iconfont">
      &#xe627;
    </span>
    <span class="h-title">{{title}}</span>
    <span class="h-next">

    </span>
  </header>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: ['title']
}
</script>

<style scoped lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.header{
  @h: 44px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  .pxToRem(height,88);
  display: flex;
  .pxToRem(line-height,88);
  background: #009dff;
  color: #fff;
  .h-back,.h-next{
    .pxToRem(width,88);
    text-align: center;
    .pxToRem(font-size,42);
  }
  .h-title{
    flex:1;
    text-align: center;
    font-weight: bold;
    .pxToRem(font-size,36);
  }
}
</style>
